<!--
 * @Description: 异常管理-异常包标配
 * @Autor: 曹敬涛
 * @Date: 2021-08-16 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-10 13:59:34
-->
<div class="ex-management">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>异常报表</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <!-- 查询框 -->
                <div class="query-box">
                    <span class="ui-float-label">
                        <span class="text">统计维度</span>
                        <p-dropdown name="taskCode" #taskCodeSelect="ngModel" [options]="tasklist"
                            [(ngModel)]="queryInfo.taskCode" placeholder="请选择">
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">时间维度</span>
                        <p-dropdown name="inspectionSeverityDescId" #inspectionSeverityDescIdSelect="ngModel"
                            [options]="typeDescList" [(ngModel)]="queryInfo.inspectionTypeDescId" dataKey="id"
                            [optionLabel]="'typeName'" placeholder="请选择">
                        </p-dropdown>
                    </span>
                    <span class="ui-float-label quality-dept">
                        <span class="text">统计时间</span>
                        <p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>
                    </span>
                    <p-button label="查询" class="query-btn"></p-button>
                    <p-button type="button" label="重置" class="reset-btn"></p-button>
                </div>
                <div style="height: 350px;width: 100%; display: flex;">
                    <div style="height: 100%;width: 60%;">
                        <p-chart type="bar" [data]="data" height="100%" style="width: 200px;"></p-chart>
                    </div>
                    <div style="height: 100%;width: 40%;">
                        <p-chart type="pie" [data]="data2" height="100%" style="width: 200px;"></p-chart>
                    </div>
                </div>
                <!-- 列表 -->
                <div class="col-lg-12">
                    <div class="m-portlet m-portlet--mobile">
                        <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                            <p-table #dataTable [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                                (onLazyLoad)="getDescList($event)" [paginator]="false" [lazy]="true" [scrollable]="true"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 80px">序号</th>
                                        <th style="width: 110px">异常单号</th>
                                        <th style="width: 110px">一级异常</th>
                                        <th style="width: 110px">二级异常</th>
                                        <th style="width: 110px">异常等级</th>
                                        <th style="width: 110px">异常描述</th>
                                        <th style="width: 110px">创建时间</th>
                                        <th style="width: 110px">提报人</th>
                                        <th style="width: 110px">责任部门</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                                    <tr>
                                        <td style="width: 80px">{{rowIndex+1}}</td>
                                        <td style="width: 110px">{{car.code}}</td>
                                        <td style="width: 110px">{{car.creationTime | date:'yyyy-MM-dd'}}</td>
                                        <td style="width: 110px">{{car.taskCode}}</td>
                                        <td style="width: 110px">{{car.inspectionDetails}}</td>
                                        <td style="width: 110px">{{car.inspectionSeverityDesc}}</td>
                                        <td style="width: 110px">{{car.state | exState}}</td>
                                        <td style="width: 110px">{{car.submitter}}</td>
                                        <td style="width: 110px">{{car.roles}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    (onPageChange)="getDescList($event)"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


</div>